<template>
  <div class="el-header">
    <el-row>
      <!--返回按钮-->
      <el-col :span="3" class="header_left">
        <i class="el-icon-arrow-left"></i>
      </el-col>
      <!--搜索区域-->
      <el-col :span="15">
        <div class="header_input">
          <el-input
            size="small"
            placeholder="请输入城市\景点\游玩主题"
            prefix-icon="el-icon-search">
          </el-input>
        </div>
      </el-col>
      <!--城市选择-->
      <router-link to="/city">
      <el-col :span="6" >
        <div class="header_right">{{this.$store.state.city}}<i class="el-icon-caret-bottom"></i></div>
      </el-col>
      </router-link>
    </el-row>
  </div>
</template>

<script>
export default {
  data: function () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/varibles.styl'

  .el-header
    color: white;
    background-color: $bgColor;
    padding: 0;

    .header_left
      font-size: .4rem;
      height: .9rem;
      line-height: .9rem;
      text-align: center;

    .header_input
      margin-top: .11rem;
      margin-right: 0;

    .header_right
      height: .9rem;
      line-height: .9rem;
      text-align: center;
      color white
</style>
